import { Component } from 'react'
import './ToDoList.scss'
class TodoLis extends Component {
  render() {
    return (
      <div className="todolist">
        {' '}
        <div className="list_head">
          <h2>拾忆记事本</h2>{' '}
          <span className="record">记录生活点点滴滴，写下生活美一个美好</span>{' '}
          <div className="listinput">
            <button className="content">内容</button>{' '}
            <input
              className="contentinp"
              type="text"
              placeholder="请输入你要记事的内容"
            />
            <button className="confirm">确定</button>{' '}
          </div>{' '}
        </div>{' '}
        <div className="navlist">
          {' '}
          <div className="show">
            {' '}
            <div className="box">
              <span>1&nbsp;&nbsp;|</span> <span>第一条记事本</span>{' '}
            </div>
            <span>X</span>{' '}
          </div>{' '}
          <div className="show">
            {' '}
            <div className="box">
              <span>2&nbsp;&nbsp;|</span>
              <span>第二条记事本</span>{' '}
            </div>
            <span>X</span>{' '}
          </div>{' '}
          <div className="show">
            {' '}
            <div className="box">
              <span>3&nbsp;&nbsp;|</span>
              <span>第三条记事本</span>{' '}
            </div>
            <span>X</span>{' '}
          </div>{' '}
        </div>{' '}
        <div className="listButtom">
          <div>总数:3</div>
          <div>清除</div>{' '}
        </div>{' '}
      </div>
    )
  }
}

export default TodoLis
